<template>
  <Form class="xtx-form" ref="target" :validation-schema="rules" v-slot="{errors}">
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-user"></i>
        <Field
        v-model="formData.account"
        name="account"
        :class="{error:errors.account}"
         class="input"
         type="text"
         placeholder="请输入用户名" />
      </div>
      <div class="error" v-if="errors.account"><i class="iconfont icon-warning" />{{errors.account}}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-phone"></i>
        <Field  v-model="formData.mobile"
         name="mobile"
         class="input"
         type="text"
         :class="{error:errors.mobile}"
         placeholder="请输入手机号" />
      </div>
      <div class="error" v-if="errors.mobile"><i class="iconfont icon-warning" />{{errors.mobile}}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-code"></i>
        <Field
        v-model="formData.code"
        name="code"
        :class="{error:errors.code}"
        class="input"
        type="text"
        placeholder="请输入验证码" />
        <span class="code" @click="send">
          {{time===0 ? '发送验证码': `${time}秒后 发送`}}
        </span>
      </div>
      <div class="error" v-if="errors.code"><i class="iconfont icon-warning" />{{errors.code}}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-lock"></i>
        <Field
         v-model="formData.password"
         name="password"
         :class="{error:errors.password}"
         class="input"
         type="password"
         placeholder="请输入密码" />
      </div>
      <div class="error" v-if="errors.password"><i class="iconfont icon-warning" />{{errors.password}}</div>
    </div>
    <div class="xtx-form-item">
      <div class="field">
        <i class="icon iconfont icon-lock"></i>
        <Field
        v-model="formData.rePassword"
        name="rePassword"
        :class="{error:errors.rePassword}"
        class="input"
        type="rePassword"
        placeholder="请确认密码" />
      </div>
      <div class="error" v-if="errors.rePassword"><i class="iconfont icon-warning" />{{errors.rePassword}}</div>
    </div>
    <a @click="submit" href="javascript:;" class="submit">立即提交</a>
  </Form>
</template>

<script>
import { useStore } from 'vuex'
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { Form, Field } from 'vee-validate'
import { useCountdown } from '@/compositions'
import { userQQPatchCode } from '@/api/user'
import { mobile, code, accountAPI as account, password, rePassword } from '@/utils/validata'
import Message from '@/components/Message'
export default {
  name: 'CallbackPatch',
  components: { Form, Field },
  props: { unionId: { type: String, default: '' } },
  setup (props) {
    // 定义数据项
    const formData = reactive({
      account: null,
      mobile: null,
      code: null,
      password: null,
      rePassword: null
    })
    // 定义校验规则
    const rules = {
      mobile: mobile,
      code: code,
      account: account,
      password: password,
      rePassword: rePassword
    }
    const router = useRouter()
    const store = useStore()
    const doPatch = async () => {
      const obj = {
        unionId: props.unionId,
        mobile: formData.mobile,
        code: formData.code,
        account: formData.account,
        passwor: formData.password
      }
      try {
        await store.dispatch('user/userQQPatchLogin', obj)
        Message({ type: 'success', text: '完善信息成功！' })
        router.push('/')
      } catch (err) {
        console.log(err)
        Message({ type: 'error', text: '完善信息失败!!！' })
      }
    }
    const target = ref(null)
    const submit = () => {
      target.value.validate().then(value => {
        doPatch()
      })
    }
    // 发验证码
    const { time, start } = useCountdown()
    const send = () => {
      if (mobile(formData.mobile) !== true) {
        return
      }
      if (time.value !== 0) {
        return
      }
      userQQPatchCode(formData.mobile).then(data => {
        console.log('userQQPatchCode', data)
        Message({ type: 'success', text: '验证码已经发送！' })
        start(60)
      }).catch(err => {
        console.log(err)
        Message({ type: 'error', text: err.response.data.message })
      })
    }
    return { formData, rules, target, submit, send, time, start }
  }
}
</script>

<style scoped lang='less'>
.code {
  position: absolute;
  right: 0;
  top: 0;
  line-height: 50px;
  width: 80px;
  color: #999;
  &:hover {
    cursor: pointer;
  }
}
</style>
